<template>
  <div class="sort">
    <div class="sort__content">
      <div class="sort__box" v-for="(item, index) in objData" :key="index">
        <div class="box-Img">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="box-wrap">
          <div class="wrap-head">
            <span class="tag" v-if="item.tag">{{ item.tag }}</span>
            {{ item.title }}
          </div>
          <div class="wrap-desc">
            <span class="pic">{{ item.money }}</span>
            <span class="text">{{ item.name1 }}</span>
            <span class="pic">{{ item.xf }}</span>
            <span class="text">{{ item.name2 }}</span>
          </div>
          <div class="warp-lay">
            <van-row>
              <van-col span="14">
                <div class="user">{{ item.press }}</div>
              </van-col>
              <van-col span="10" style="text-align: right">
                <van-button class="tagbtn" plain type="success">{{
                  item.btnName
                }}</van-button>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  objData: {
    type: Array,
    default: [],
  },
});
</script>
<style lang="scss" scoped>
.sort {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    div {
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #171a1d;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #676b6b;
    }
  }
  &__content {
    //background-color: #fff;
    border-radius: 4px;
    //padding: 13px 16px;
  }
  &__box:last-child {
    margin-bottom: 0;
  }
  &__box {
    display: flex;
    margin-bottom: 12px;
    padding: 14px 16px 16px;
    background: #ffffff;
    border-radius: 4px;
    .box-Img {
      width: 120px;
      height: 90px;
      border-radius: 7px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 7px;
      }
    }
    .box-wrap {
      flex: 1;
      margin-left: 10px;
      .wrap-head {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #272b2d;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        height: 46px;
        .tag {
          background: #d8f3e5;
          border-radius: 2px;
          display: inline-block;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #00ad6f;
          line-height: 17px;
          text-align: center;
          font-style: normal;
          padding: 1px 4px;
          margin-right: 9px;
        }
      }
      .wrap-desc {
        margin: 4px 0 5px 0;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #676b6b;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        .pic {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #ffac24;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #676b6b;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
      }
      .warp-lay {
        .user {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #b9bdbd;
          line-height: 26px;
          text-align: left;
          font-style: normal;
          height: 26px;
        }
        .tagbtn {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 10px;
          line-height: 20px;
          text-align: center;
          font-style: normal;
          height: 20px;
        }
      }
    }
  }
}
</style>
